<template>
  <div class='noticeDetails'>
    <el-dialog title="通知详情" :visible.sync="isShow" center >
      <el-form :model="form" ref="ruleForm" label-position="left" label-width="100px">
        <el-form-item label="通知标题" >
          <el-input disabled v-model="form.title" ></el-input>
        </el-form-item>
        <!-- <el-form-item label="通知摘要" >
          <el-input disabled v-model="form.abstract"></el-input>
        </el-form-item> -->
        <el-form-item label="发布人" >
          <el-input disabled v-model="form.publisher"></el-input>
        </el-form-item>

        <el-form-item label="通知内容" prop="news">
          <el-input
            disabled
            type="textarea"
            :rows="10"
            v-model="form.news"
            placeholder="请输入通告内容">
          </el-input>
        </el-form-item>
        <el-form-item label="通知时间" >
          <el-input disabled v-model="form.created_at" ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow:false,
      id: null,
      form: {
        title: '',
        news: '',
        created_at: ''
      },
      noticeData: null
    }
  },
  methods: {
    show (data) {
      // this.id = data.id
      this.isShow = true
      this.getDetailsData(data.id)
      this.noticeData = data
    },
    getDetailsData (id) {
      let params = {
        news: id
      }
      this.$axios.get(`api/news/${id}`, {params:params}).then(res => {
        if (res.data.code == 200) {
          this.form = res.data.data

          this.$nextTick(() => {
            if (!this.noticeData.status || this.noticeData.status == 2) {
              this.readMessage(id)
            }
          })
        } else {
          this.$message.error('服务器繁忙，获取消息数据失败！')
        }
      })
    },
    // 读取消息
    readMessage(id) {
      let params = {
        news: id
      }
      this.$axios.post(`api/news/${id}/set_read`, params).then(res => {
        if (res.data.code == 200) {
          this.$emit('refresh')
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .noticeDetails {
    .el-dialog {
      max-width: 600px;
    }
    .el-textarea.is-disabled .el-textarea__inner {
      cursor:auto;
      color: #606266;
    }
    .el-input.is-disabled .el-input__inner {
      cursor:auto;
      color: #606266;
    }
  }
</style>
